<template>
    <div class="box">
      <JsContentTitle
        :pageTitle="state.pageTitle"
        :buttonData="state.buttonData"
      ></JsContentTitle>
      <div class="contentView">
        <JsTable
          :toolBar="state.toolBar"
          :total="state.totalCount"
          :dataSource="state.dataSource"
          :columns="state.columns"
          :refresh="state.refresh"
          @search="searchEvent"
        >
        </JsTable>
      </div>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { getRecord, returnBook } from '@/api/xinrn'

  onMounted(() => {
    state.value.refresh = 1//刷新列表执行searchEvent方法
  })
  
  const searchEvent = (params: any) => {
    getRecord(params).then((res: any) => {
        console.log("Received data:", res.data.data)
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
    }).catch(error => {
   console.error("Failed to load data:", error.response.data);
})
    state.value.refresh = 0
}

//还书逻辑实现
  const returnbook = (row: any) => {
    console.log("尝试归还书籍，数据：", row);
    returnBook(row.book_id).then(response => {
      console.log("归还成功", response);
      state.value.refresh = 1; // 触发重新加载书籍列表
    }).catch(error => {
      console.error("归还失败", error.response.data);
    });
  }
  
  const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '归还书籍',
    columns: {
      
      props: [
        {
          name: '书名',
          key: 'book_name',//核对是否与实际字段相同
        },
        {
          name: '作者',
          key: 'author',
        },
        {
          name: '出版时间',
          key: 'year_publication',//核对是否与实际字段相同
        },
        {
          name: '借阅时间',
          key: 'borrow_at',//核对是否与实际字段相同
        },
        {
          name: '简介',
          key: 'synopsis',
        },
      ],
      options: {
        width:'auto',
        btns: [
          {
            label: '归还书籍',
            key: 'return',
            type: 'warning',
            event: returnbook,
          },
        ],
      },
    },
    dataSource: [],
    toolBar: {
      form: {
        s1: '',
        s2: '',
        s3: '',
      },
      // input: [
      //   {
      //     label: '书名',
      //     key: 'bookname',
      //     placeholder: '请输入',
      //     el: 'input',//输入框
      //   },
      //   {
      //     label: '作者名',
      //     key: 'author',
      //     placeholder: '请输入',
      //     el: 'input',//输入框
      //   },
      // ],
      // btns: [
      //   {
      //     label: '查询',
      //     icon: 'Search',
      //     event: searchEvent,
      //   },
      //   {
      //     label: '重置',
      //     event: resetEvent,
      //   },
      // ],
    },
  } as any)
  </script>
  
  <style lang="scss" scoped>
  *::-webkit-scrollbar {
    display: none;
    width: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    .contentView {
      background-color: white;
      border-radius: 5px;
      height: calc(100vh - 144px);
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
  </style>
  